<template>
	<view>
		<view class="flex flex-column flex-center w-100 vh-100" v-if='info&&info.status=="3"'>
			<view style="position: relative; width: 200rpx; height: 200rpx;">
				<zero-loading position="absolute"></zero-loading>
			</view>
			<view class="h9 text-dark-light-3">
				生成视频中...
			</view>
		</view>
		<view v-if='info.status=="2"||info.status=="1"' class="p-4">
			<view v-for="(item,index) in imageList"
				class="p-4 bg-white rounded-3 mb-5 flex flex-x-space-between flex-row flex-y-center" :key="index">
				<view class="h9 text-dark-light-1 w-45">
					<textarea class="w-100" :disabled='item.img_status!="6"&&item.img_status!="7"&&item.img_status!="5"'
						:maxlength='WEBCONFIG?.section_text + 15' auto-height v-model="item.content"></textarea>
				</view>
				<view class="w-45">
					<uni-segmented-control @clickItem='item.type==1?item.type=2:item.type=1' :values="items"
						style="height: 30rpx !important;"></uni-segmented-control>
					<view v-show="item.type==1" class="flex flex-column   min-vh-10">
						<view v-if='item.img_status=="5"' class="p-3">
							<image :src='item.url' class="w-100 mb-3" mode="widthFix" show-menu-by-longpress
								@click="previewImage(item.url)"></image>
							<view class="btn rounded-3 flex flex-center p-1 text-white" @click="changeImage(item)">
								重新生成
							</view>
						</view>

						<view v-if='arr.includes(item.img_status)'>
							<view class="w-100 vh-10 mb-3 position-relative">
								<zero-loading position="absolute"></zero-loading>
							</view>
							<view class="flex flex-center p-1 h9 text-dark-light-3">图片生成中
							</view>
						</view>

						<view v-if='item.img_status=="6"||item.img_status=="7"'>
							<view class="w-100  p-3 flex flex-center ">
								<image style="width:100rpx;height: 100rpx;" src="../../static/icon/error-img.png">
								</image>
							</view>
							<view class="flex flex-center p-1 h9 text-dark-light-3">图片生成失败
							</view>
							<view class="btn rounded-3 flex flex-center p-1 text-white" @click="changeImage(item)">
								重新生成
							</view>
						</view>
					</view>
					<view v-show="item.type==2">
						<view v-if='item.audio_status=="5"'>
							<view class="w-100  p-3 flex flex-center ">
								<image src="../../static/icon/success.png" style="width:100rpx;height: 100rpx;"
									class="w-100 " mode="widthFix" @click="previewImage(item.url)"></image>
							</view>
							<view class="flex flex-center p-1 h9 text-dark-light-3">音频生成成功
							</view>
						</view>

						<view v-if='arr.includes(item.audio_status)'>
							<view class="w-100 vh-10 mb-3 position-relative">
								<zero-loading position="absolute"></zero-loading>
							</view>
							<view class="flex flex-center p-1 h9 text-dark-light-3">音频生成中
							</view>
						</view>

						<view v-if='item.audio_status=="6"||item.audio_status=="7"'>
							<view class="w-100  p-3 flex flex-center ">
								<image style="width:100rpx;height: 100rpx;" src="../../static/icon/error-img.png">
								</image>
							</view>
							<view class="flex flex-center p-1 h9 text-dark-light-3">音频生成失败
							</view>
							<view class="btn rounded-3 flex flex-center p-1 text-white" @click="changeAudio(item.id)">
								重新生成
							</view>

						</view>
					</view>
				</view>

			</view>
			<view @click="createVideo" class="btn-1 rounded-3 flex flex-center p-1 text-white">
				生成视频</view>
		</view>
		<view v-if='info&&info.status=="4"' class="p-6">
			<video style="width: 100%;height: 60vh;" class="mb-5" object-fit='contain' :src="info.path"></video>
			<view class="btn-1 rounded-3 flex flex-center p-1 text-white" @click="loadVideo()">保存视频到手机</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import { $http } from '@/utils'
	import { useWebConfigStore, useRefs } from "@/stores";


	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const info = ref()
	const id = ref(0)
	const imageList = ref()
	const items = ref(['图片', '语音'])
	//创建定时器
	const timer = ref()

	const arr = ref(['1', '2', '3', '4'])
	onLoad((option : any) => {
		id.value = option.id
		getVideo()
	})
	onUnload(() => {
		clearInterval(timer.value)
	})
	//获取详情
	const getVideo = (() => {
		$http.get('Video/getVideo', { data: { id: id.value } }).then(res => {
			info.value = res.data
			if (info.value.status < 3) {
				getImageList()
				timer.value = setInterval(() => {
					getList()
				}, 3000)
			} else if (info.value.status == 3) {
				timer.value = setInterval(() => {
					getInfo()
				}, 3000)
			}
		})
	})
	const getInfo = (() => {
		$http.get('Video/getVideo', { data: { id: id.value } }).then(res => {
			let detail = res.data
			if (detail.status != 3) {
				info.value=detail
				clearInterval(timer.value)
			}
		})
	})

	//获取列表
	const getImageList = (() => {
		$http.get('Video/getMaterialList', { data: { id: id.value } }).then(res => {
			imageList.value = res.data
		})
	})
	const getList = (() => {
		$http.get('Video/getMaterialList', { data: { id: id.value } }).then(res => {
			let data = res.data
			for (let i = 0; i < imageList.value.length; i++) {
				if (data[i]['img_status'] != imageList.value[i]['img_status'] || data[i]['audio_status'] != imageList.value[i]['audio_status']) {
					imageList.value[i]['url'] = data[i]['url'];
					imageList.value[i]['img_status'] = data[i]['img_status']
					imageList.value[i]['audio_status'] = data[i]['audio_status']
				}
			}
		})
	})
	const createVideo = (() => {
		uni.showLoading({
			title: '创建视频中...',
			mask: true
		})
		$http.post('Video/cerateVideo', { data: { id: id.value } }).then(res => {
			uni.hideLoading()
			getVideo()
		})
	})
	const changeImage = ((item : any) => {
		uni.showModal({
			title: '温馨提示',
			content: '确认重新生成吗',
			success(res) {
				if (res.confirm) {
					$http.post('Video/changeImage', { data: { id: item.id, content: item.content } }).then(res => {
						uni.showToast({
							title: '请求成功,正在处理中',
							icon: 'none'
						})
						getVideo()
					})
				}
			}
		})
	})

	const changeAudio = ((id : number) => {
		uni.showModal({
			title: '温馨提示',
			content: '确认重新生成吗',
			success(res) {
				if (res.confirm) {
					$http.post('Video/changeAudio', { data: { id: id } }).then(res => {
						uni.showToast({
							title: '请求成功,正在处理中',
							icon: 'none'
						})
						getVideo()
					})
				}
			}
		})
	})

	//图片预览
	const previewImage = ((src : any) => {
		uni.previewImage({
			urls: [src],
			current: 0
		});
	})

	const load = (() => {
		uni.showLoading({
			title: '下载中....',
			mask: true
		})
		const filePath = wx.env.USER_DATA_PATH + '/' + Math.ceil(Math.random() * 99999) + '.mp4'
		uni.downloadFile({
			url: info.value.path,//文件路径
			filePath: filePath,
			success: (res) => {
				uni.hideLoading()
				if (res.statusCode === 200) {
					uni.saveVideoToPhotosAlbum({
						filePath: res.filePath,
						success: function (errMsg) {
							uni.showToast({
								mask: true,
								title: '保存成功'
							});
						},
						fail: (errMsg) => {
							uni.showToast({
								mask: true,
								title: '保存失败',
								icon: 'none'
							});
						},
						complete: (errMsg) => {

						}
					});
				}
			}
		});
	})

	const loadVideo = (() => {
		uni.getSetting({
			success: (res) => {
				if (res.authSetting['scope.writePhotosAlbum']) {
					load()
				} else {
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: () => {
							load()
						},
						fail: () => {
							uni.showModal({
								content: '检测到您没打开保存图片的权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log(
													res);
											}
										})
									} else {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										})
										return false;
									}
								}
							})
						}
					})
				}
			}
		})
	})
</script>

<style>
	page {
		background-color: #f1f2f6;
	}

	.btn {
		height: 60rpx;
		width: 100%;
		background-color: #1890ff;
	}

	.btn-1 {
		height: 80rpx;
		width: 100%;
		background-color: #1890ff;
	}

	.segmented-control {
		height: auto !important;
	}
</style>